<script setup lang="ts">
import { computed } from 'vue';

interface SvgProps {
	name: string;
	iconStyle?: { [key: string]: any };
}
const props = withDefaults(defineProps<SvgProps>(), {
	iconStyle: () => ({}),
});

const formatSvgName = computed(() => {
	return `#icon-${ props.name }`
})
</script>
<template>
	<svg class="svg-icon" :style="props.iconStyle" aria-hidden="true">
		<use :xlink:href="formatSvgName" />
	</svg>
</template>
<style lang="scss" scoped>
.svg-icon {
	width: 1em;
	height: 1em;
	overflow: hidden;
	vertical-align: -0.15em;
	fill: currentcolor;
}
</style>
